<%@ page import="com.ws.haungjia.utils.Res" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理</title>

  <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
<%--  rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">--%>
  <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-2.1.0.min.js"></script>
  <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>

  <style>
    .avatar-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }
    .search-container {
      background-color: #f8f9fa;
      padding: 15px;
      border-radius: 5px;
      margin-bottom: 20px;
    }
    .table-container {
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }
    .password-cell {
      font-family: monospace;
      letter-spacing: 1px;
      color: #666;
    }
    .operation-cell .btn {
      padding: 3px 8px;
      font-size: 14px;
    }
  </style>
</head>
<body>
<div class="container-fluid py-3">
  <h2 class="mb-3">用户管理</h2>

  <!-- 查询区域 -->
  <div class="search-container">
    <form class="row g-2">
      <div class="col-md-3">
        <label for="username" class="form-label">用户名</label>
        <input type="text" class="form-control" id="username" placeholder="请输入用户名">
      </div>
      <div class="col-md-3 align-self-end">
        <button type="submit" class="btn btn-primary">查询</button>
        <button type="reset" class="btn btn-secondary ms-2">清空</button>
        <button type="submit" class="btn btn-primary">
          <a href="${ pageContext.request.contextPath}/tiaozhuan14" style="color: white; text-decoration: none;">增加</a>
        </button>
      </div>
    </form>
  </div>

  <!-- 用户列表 -->
  <div class="table-container">
    <table class="table table-hover">
      <thead>
      <tr>
        <th>编号</th>
        <th>头像</th>
        <th>用户名</th>
        <th>手机号</th>
        <th>注册时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <c:forEach items="${list}" var="user">
        <tr>
          <td>${user.userID}</td>
          <td><img src="<%=Res.fileUri%>${user.touxiang}" width="100px" height="100px"></td>
          <td>${user.name}</td>
          <td>${user.shouji}</td>
          <td> <fmt:formatDate value="${user.zhuceshijian}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
<%--          <td>${user.zhuceshijian}</td>--%>
          <td class="operation-cell">
            <button class="btn btn-sm btn-warning"><a href="${pageContext.request.contextPath}/qian/huixian?id=${user.userID}" style="color: white; text-decoration: none;">修改</a></button>
            <button class="btn btn-sm btn-danger ms-1"><a href="${pageContext.request.contextPath}/qian/shan?id=${user.userID}" style="color: white; text-decoration: none;">删除</a> </button>
          </td>
        </tr>
      </c:forEach>

      </tbody>
    </table>
  </div>
</div>

<%--<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>--%>
</body>
</html>